<template>
  <div class="left-bar j-primary-light-bgcolor">
     <div class="item j-primary-color" :class="{ 'j-primary-bgcolor active':item.checked }"
     v-for="(item,index) in pointList" :key="index" @click="handle(item)">
       {{ item.pointName }}
     </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pointList: []
    };
  },
  created() {
    this.getPointList();
  },
  methods: {
    handle(item) {
      this.pointList = this.pointList.map(item => {
        item.checked = false;
        return item;
      });
      item.checked = true;
      this.$emit('change', item);
    },
    getPointList() {
      const params = {
        url: `/api/ems/station/list`,
        type: 'post',
        params: {}
      };
      this.$ajax(params).then(resp => {
        const { result, rows } = resp;
        if (result) {
          if (rows.length) {
            this.pointList = rows.map((item, index) => {
              item.checked = index === 0;
              return item;
            });
            this.$emit('change', rows[0]);
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped >
// $primary-light-bgcolor:  #bad4ec;
// $primary-color:#196FBF;

// .j-primary-color {
//   color:$primary-color !important;
// }
// .j-primary-bgcolor {
//   background-color:$primary-color !important;
// }
// .j-primary-light-bgcolor {
//   background-color: $primary-light-bgcolor !important;
//  }
// .j-primary-border-color {
//   border-color:$primary-color !important;
// }
// .j-primary-light-border-color {
//   border-color: $primary-light-bgcolor !important;
// }

.left-bar{
  width: 200px;
  height: 100%;
  // background: rgba(213, 241, 223, 1);
  border: 1px solid #dcdfe6;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  margin-right: 10px;
  .item{
    height: 33px;
    line-height: 33px;
    font-size: 16px;
    cursor: pointer;
    background-color: white;
    margin: 10px 20px;
    text-align: center;
    border-radius: 5px;
  }
  .active{
    color: white !important;
  }
}


</style>